<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('NewBee商城-订单详情','order-detail')">
</head>
<link rel="stylesheet" th:href="@{/admin/plugins/sweetalert2/sweetalert2.min.css}"/>
<body>
<header th:replace="mall/header::header-fragment"></header>
<!-- nav -->
<nav th:replace="mall/header::nav-fragment"></nav>

<!-- personal -->
<div id="personal">
    <div class="self-info center">

        <!-- sidebar -->
        <div th:replace="mall/personal-sidebar::sidebar-fragment"></div>

        <div class="intro fr">
            <div class="uc-box uc-main-box">
                <div class="uc-content-box order-view-box">
                    <th:block th:each="order : ${orders}">
                        <div class="box-hd">
                            <h1 class="title">订单详情
                                <small>请谨防钓鱼链接或诈骗电话，<a href="##">了解更多&gt;</a>
                                </small>
                            </h1>
                            <div class="more clearfix">
                                <h2 class="subtitle">订单号：
                                    <th:block th:text="${order['order'].orderNo}"></th:block>
                                    <span class="tag tag-subsidy"></span>
                                </h2>
                                <div class="actions">
                                    <input type="hidden" class="order-no-value" th:value="${order['order'].orderNo}">
                                    <!--取消-->
                                    <th:block th:if="${order['order'].status == null}">
                                        <a class="btn btn-small btn-primary" title="去支付">已取消</a>
                                    </th:block>
                                    <!-- 状态：待支付 -->
                                    <th:block th:if="${order['order'].status == '0'}">
                                        <a id="payOrder" class="btn btn-small btn-primary" title="去支付">去支付</a>
                                        <a class="btn btn-small btn-line-gray cancel-order-btn"
                                           title="取消订单">取消订单</a>
                                    </th:block>
                                    <!-- 状态：已支付但未发货 -->
                                    <th:block th:if="${order['order'].status > '0' and order['order'].status < '3'}">
                                        <a class="btn btn-small btn-line-gray cancel-order-btn"
                                           title="取消订单">取消订单</a>
                                    </th:block>
                                    <!-- 状态：出库成功 -->
                                    <th:block th:if="${order['order'].status == '3'}">
                                        <a id="queren"
                                           class="btn btn-small btn-primary submit-order-btn" title="确认收货">确认收货</a>
                                    </th:block>
                                </div>
                            </div>
                        </div>
                        <div class="box-bd">
                            <div class="uc-order-item uc-order-item-pay">
                                <div class="order-detail">
                                    <div class="order-summary">
                                        <div class="order-status">
                                            <!-- 订单状态显示 -->
                                            <th:block th:if="${order['order'].status == '0'}">请尽快完成支付哦~</th:block>
                                            <th:block th:if="${order['order'].status == '1'}">订单已确认，等待配货中~</th:block>
                                            <th:block th:if="${order['order'].status == '2'}">商家已发货~</th:block>
                                            <th:block th:if="${order['order'].status == '3'}">商品已送达，等待取货~</th:block>
                                            <th:block th:if="${order['order'].status == '4'}">交易成功，感谢您的支持！</th:block>
                                            <th:block th:if="${order['order'].status < '0'}">交易已关闭~</th:block>
                                        </div>

                                        <!-- 订单进度条 -->
                                        <th:block th:if="${order['order'].status >= '0'}">
                                            <div class="order-progress">
                                                <ol class="progress-list clearfix progress-list-5">
                                                    <li th:classappend="${order['order'].status >= '0' ? 'step step-active' : 'step'}">
                                                        <div class="progress"><span class="text">下单</span></div>
                                                        <div class="info" th:text="${order['order'].createTime}">02月07日</div>
                                                    </li>
                                                    <li th:classappend="${order['order'].status >= '1' ? 'step step-active' : 'step'}">
                                                        <div class="progress"><span class="text">付款</span></div>
                                                        <div class="info" th:text="${order['order'].payTime}">02月07日</div>
                                                        <div class="info"></div>
                                                    </li>
                                                    <li th:classappend="${order['order'].status >= '2' ? 'step step-active' : 'step'}">
                                                        <div class="progress"><span class="text">商家发货</span></div>
                                                        <div class="info" th:if="${order['order'].status >= '2'}"
                                                             th:text="${order['order'].updateTime}"></div>
                                                    </li>
                                                    <li th:classappend="${order['order'].status >= '3' ? 'step step-active' : 'step'}">
                                                        <div class="progress"><span class="text">待收货</span></div>
                                                        <div class="info" th:if="${order['order'].status >= '2'}"
                                                             th:text="${order['order'].updateTime}"></div>
                                                    </li>
                                                    <li th:classappend="${order['order'].status == '4' ? 'step step-active' : 'step'}">
                                                        <div class="progress"><span class="text">交易成功</span></div>
                                                        <div class="info" th:if="${order['order'].status == '4'}"
                                                             th:text="${order['order'].updateTime}"></div>
                                                    </li>
                                                </ol>
                                            </div>
                                        </th:block>
                                    </div>
                                    <!-- 商品信息 -->
                                    <table class="order-items-table" style="width: 47%">
                                        <tbody>
                                        <th:block th:each="orderItem : ${order['orderItems']}">
                                            <tr>
                                                <td class="col col-thumb">
                                                    <div class="figure figure-thumb">
                                                        <a target="_blank"
                                                           th:href="@{'/shopping/item/detail/' + ${orderItem['id']}}">
                                                            <img th:src="@{${orderItem['goodPic']}}" width="80"
                                                                 height="80" alt="">
                                                        </a>
                                                    </div>
                                                </td>
                                                <td class="col col-name">
                                                    <p class="name">
                                                        <a target="_blank"
                                                           th:href="@{'/shopping/item/detail/' + ${orderItem['id']}}"
                                                           th:text="${orderItem['goodName']}">商品名称</a>
                                                    </p>
                                                </td>
                                                <td class="col col-price">
                                                    <p class="price"
                                                       th:text="${orderItem['dealPrice'] + '0元 x ' + orderItem['count']}"></p>
                                                </td>
                                            </tr>
                                        </th:block>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- 收货信息 -->
                                <div id="editAddr" class="order-detail-info">
                                    <h3>收货信息</h3>
                                    <table class="info-table">
                                        <tbody>
                                        <tr>
                                            <td th:text="${order['order'].receiverAddrDetail}">收货地址</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- 支付方式 -->
                                <div id="editTime" class="order-detail-info">
                                    <h3>支付方式</h3>
                                    <table class="info-table">
                                        <tbody>
                                        <tr>
                                            <th>支付方式：</th>
                                            <td>
                                                <th:block th:if="${order['order'].payType == '微信'}">微信支付</th:block>
                                                <th:block th:if="${order['order'].payType == '支付宝'}">支付宝支付</th:block>
                                                <th:block th:if="${order['order'].payType == null}">未支付</th:block>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- 总价 -->
                                <div class="order-detail-total">
                                    <table class="total-table">
                                        <tbody>
                                        <tr>
                                            <th>运费：</th>
                                            <td><span class="num">0.00</span>元</td>
                                        </tr>
                                        <tr>
                                            <th class="total">商品总价：</th>
                                            <td class="total">
                                                <span class="num" th:text="${order['order'].totalPay}">1299.00</span>元
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </th:block>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div th:replace="mall/footer::footer-fragment"></div>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 3 -->
<script th:src="@{/mall/js/bootstrap3.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert2/sweetalert2.all.min.js}"></script>
<script th:src="@{/mall/js/order-detail.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/bootstrap3.js}"></script>
<script th:inline="javascript">
    $(function () {
        $(".cancel-order-btn").click(function () {
            let orderNo = $(this).parent().find('.order-no-value').val(); // 确保每条订单都对应唯一值
            Swal.fire({
                title: '确认取消订单？',
                text: "取消后不可恢复，请确认是否继续！",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '确认取消',
                cancelButtonText: '暂不取消'
            }).then((result) => {
                if (result.isConfirmed) {
                    // 发送完整的Order对象
                    let order = {
                        orderNo: orderNo,
                        status: null
                    };

                    $.ajax({
                        url: ctx+"/shopping/orders/update",
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify(order),
                        success: function(result) {
                            console.log(result.code);
                            if (result.code === '200') {
                                Swal.fire('取消成功', '订单已成功取消', 'success').then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire('取消失败', result.message, 'error');
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire('取消失败', '网络错误，请重试', 'error');
                        }
                    });
                }
            });
        });
        $(".submit-order-btn").click(function () {
            let orderNo = $(this).parent().find('.order-no-value').val(); // 确保每条订单都对应唯一值
            Swal.fire({
                title: '确认收货？',
                text: "收货后不可恢复，请确认是否继续！",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '确认收货',
                cancelButtonText: '暂不收货'
            }).then((result) => {
                if (result.isConfirmed) {
                    // 发送完整的Order对象
                    let order = {
                        orderNo: orderNo,
                        status: 4
                    };

                    $.ajax({
                        url: ctx+"/shopping/orders/update",
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify(order),
                        success: function(result) {
                            console.log(result.code);
                            if (result.code === '200') {
                                Swal.fire('收货成功', '订单已成功收货', 'success').then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire('收货失败', result.message, 'error');
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire('收货失败', '网络错误，请重试', 'error');
                        }
                    });
                }
            });
        });
    });
</script>
</body>
</html>
